<template>
	<van-sticky>
		<navbar/>
	</van-sticky>
	<div class="contain">
		<div class="card">
			<div class="imgBx">
				<img src = "../../../static/img/myimg.png"/>
			</div>
			<div class="content">
				<div class="details">
					<h2>{{ userinfo.username }}</h2>
					<div class="data">
						<h3>10<br><span>积分</span></h3>
						<h3>12<br><span>关注</span></h3>
						<h3>10<br><span>粉丝</span></h3>
					</div>
					<div class="actionBtn">
						<button @click="logOut">退出登录</button>
					</div>
				</div>
			</div>
		</div>
		<div class="profilecard">	
			<div class="content">
				<div class="details">
					<span><van-icon name="user-o" size="40"/></span>
					<span>我的主页</span>
				</div>
			</div>
		</div>
<!-- 		<div class="profilecard">
			<div class="details">
				<span><van-icon name="user-o" size="40"/></span>
			</div>
		</div>
		<div class="profilecard">
			<div class="details">
				<span><van-icon name="user-o" size="40"/></span>
			</div>
		</div> -->
	</div>

</template>


<script lang="ts" setup>
	import { reactive, onMounted } from 'vue';
	import { getUserInfo } from '@/api/user.ts';
	import router from '@/router';
	
	const userinfo = reactive({
		"username": "昵称",
		"intro": "这里是用户的介绍信息",
		"avator": "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
	})
	
	// const afterRead = (file) => {
	//       // 此时可以自行将文件上传至服务器
	//       console.log(file);
	// };
	const $emit = defineEmits(['change'])
	onMounted(() => {
		// 触发的事件， 传递的参数
		$emit("change", 3)
		// console.log("this is on mounted")
		getData()
	})
	const getData = () => {
		const user_data = localStorage.getItem("s_user")
		const id = JSON.parse(user_data)["id"]
		getUserInfo(id)
		.then(res => {
			// console.log('getUserInfo', res)
			if(res.code != 0){
				console.log(`获取数据失败，` + res.message);
			} else {
				userinfo.username = res.data.username
				userinfo.intro = res.data.intro
				// console.log("获取数据成功")
			}
		})
		.catch(err => {
			console.log(err, `服务端错误`)
		})
	}
	
	function logOut(){
		window.localStorage.clear()
		router.push("/login")
	}
	
</script>


<style scoped>
	@import url("../../assets/style/mypage.css");
</style>
